<template>
  <div class="tab">
    <template v-for="(item , index ) in titles" :key="item">
        <div class="container-item" @click="ClickIndex(index)" :class="{active:index === currentIndex}">
            {{ item }}
        </div>
    </template>
  </div>
</template>

<script>
export default {
    emits:["tabClick"],
   props:{
    titles:{
        type:Array,
        default: () => []
    }
   } ,
   data(){
    return{
        currentIndex:0
    }
   },
   methods:{
    ClickIndex(index){
        this.currentIndex = index
        this.$emit("tabClick",index)
    }
   }


}
</script >

<style scoped>
 .tab{
    display: flex;
    text-align: center;
    line-height: 44px;
    height: 44px;
    background-color: #ff0000;
 }
 .container-item{
    flex: 1;
 }
 .container-item.active{
    color: #fff;
 }



</style>